<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <script src="js/axios.js"></script>
    <script src="plugs/vue/vue.js"></script>
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
      .main {
        width: 100%;
        height: 100vh;
        .contentBox {
          width: 100%;
          height: 100%;
          display: flex;
          padding: 35px 20px;

          /* 左侧样式 */
          .leftContent {
            width: 30vw;
            height: 100%;
            .leftTop {
              width: 100%;
              height: 60%;
              .leftInner {
                width: 100%;
                height: auto;
                .leftHead {
                  height: 0;
                  width: 150px;
                  border-bottom: 35px solid #3e8ef7;
                  border-right: 10px solid transparent;
                  position: relative;
                  .leftTextSpan {
                    font-size: 15px;
                    color: #fff;
                    height: 100%;
                    position: absolute;
                    left: 5px;
                    top: 5px;
                    font-weight: 600;
                  }
                  .leftLine {
                    border-bottom: 1px solid #9cbed4;
                    position: absolute;
                    top: 35px;
                    width: 29vw;
                  }
                }
                .leftBody {
                  width: 100%;
                  line-height: 3vh;
                  font-size: 1rem;
                  color: #000;
                  font-family: none;
                  margin-top: 15px;
                }
              }
              .leftInner:not(:first-child) {
                margin-top: 30px;
              }
            }
            .leftBottom {
              width: 100%;
              height: calc(40% - 20px);
              display: flex;
              margin-top: 30px;
              .leftBottonIn {
                width: 50%;
                height: 100%;
                /* padding-top: 20px; */
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                /* 葡萄图样式 */
                .grapeBox {
                  width: calc(100% - 20px);
                  height: 100%;
                  margin: 0 auto;
                  position: relative;
                  .grapeHead {
                    width: 100%;
                    height: 30%;
                    > img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .grapeBody {
                    width: 100%;
                    height: 80%;
                    position: absolute;
                    top: 15%;
                    left: 5%;
                    .grapeBodyBox {
                      width: 90%;
                      height: 100%;
                      .row {
                        width: 100%;
                        height: 10%;
                        display: flex;
                        justify-content: center;
                        .col {
                          width: 35px;
                          height: 35px;
                          background: #a285ec;
                          border-radius: 50%;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          border: 1px solid #504f4f;
                          font-size: 0.8vw;
                        }
                      }
                    }
                  }
                }
                .leftBLine {
                  height: 150px;
                  width: calc(100% - 20px);
                  display: flex;
                  align-items: center;
                  position: relative;
                  .leftPointIcon {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 1;
                    .leftPointInner {
                      width: 12px;
                      height: 12px;
                      border-radius: 50%;
                    }
                  }
                  .leftBLineText {
                    margin-left: 10px;
                    width: 100%;
                    background-image: linear-gradient(
                      to right,
                      #feefff,
                      transparent
                    );
                    padding: 5px 0px 5px 5px;
                  }
                  .whitePointStyle {
                    background-image: linear-gradient(
                      to right,
                      #f0f0f0,
                      transparent
                    );
                  }
                  .greenPointStyle {
                    background-image: linear-gradient(
                      to right,
                      #dffdc4,
                      transparent
                    );
                  }
                }
                .leftBLine:nth-child(1)::before {
                  content: "";
                  background: #ecf4ff;
                  width: 5px;
                  height: 23vh;
                  position: absolute;
                  left: 8.5px;
                  top: 50px;
                }
              }
            }
          }

          /* 右侧 */
          .rightContent {
            width: 70vw;
            height: 100%;
            .peopleBox {
              width: 100%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              overflow: auto;
              .peopleCard {
                width: calc(25% - 40px);
                height: calc(33% - 12px);
                border: 2px solid #adacab;
                margin-left: 40px;
                margin-top: 15px;
                border-radius: 3px;
                .peopleTop {
                  width: 100%;
                  height: 40%;
                  display: flex;
                  .peopleTLeft {
                    width: calc(100% - 30px);
                    height: 100%;
                    .peopleRow {
                      width: 100%;
                      height: 33%;
                      font-size: 1rem;
                      display: flex;
                      background: #d8ecf9;
                      border-bottom: 2px solid #fff;
                      .rowLeft {
                        width: 40%;
                        color: #fff;
                        background: #83b3d4;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-right: 2px solid #fff;
                      }
                      .rowRight {
                        width: 60%;
                        color: #141414;
                        background: #d8ecf9;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        padding-left: 5px;
                        line-height: 12px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        align-items: center;
                        -webkit-line-clamp: 2;
                        align-self: center;
                        -webkit-box-orient: vertical;
                      }
                    }
                    .peopleRow:nth-last-child(1) {
                      border-bottom: 1px solid #fff;
                    }
                  }
                  .peopleTRight {
                    width: 100px;
                    height: 100%;
                    border: 1px solid #fff;
                    border-left: none;
                    > img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
                .peopleBottom {
                  width: 100%;
                  height: 60%;
                  background: #e7f1ff;
                  .propleGrapeBox {
                    width: 45%;
                    height: 100%;
                    margin: 0 auto;
                    padding-top: 5px;
                    /* 葡萄图样式 */
                    .grapeBox {
                      width: 100%;
                      height: 100%;
                      margin: 0 auto;
                      position: relative;
                      .grapeHead {
                        width: 100%;
                        height: 30%;
                        > img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                      .grapeBody {
                        width: 100%;
                        height: 80%;
                        position: absolute;
                        top: 15%;
                        left: 5%;
                        .grapeBodyBox {
                          width: 90%;
                          height: 100%;
                          .row {
                            width: 100%;
                            height: 10%;
                            display: flex;
                            justify-content: center;
                            .col {
                              width: 18px;
                              height: 18px;
                              background: #a285ec;
                              border-radius: 50%;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              border: 1px solid #504f4f;
                              font-size: 0.6rem;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .listEmpty {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 2rem;
            }
          }
          .peopleCard:nth-child(1),
          .peopleCard:nth-child(2),
          .peopleCard:nth-child(3),
          .peopleCard:nth-child(4) {
            margin-top: 0;
          }
        }
      }
    </style>
  </head>
  <div id="app" class="main">
    <div class="contentBox">
      <!-- 左侧 -->
      <div class="leftContent">
        <!-- top -->
        <div class="leftTop">
          <div class="leftInner" v-for="(item,index) in leftList">
            <div class="leftHead">
              <div class="leftTextSpan">{{item.title}}</div>
              <span class="leftLine"></span>
            </div>
            <div class="leftBody">{{item.content}}</div>
          </div>
        </div>
        <!-- bottom -->
        <div class="leftBottom">
          <!-- 葡萄图 -->
          <div class="leftBottonIn">
            <div class="grapeBox">
              <div class="grapeHead">
                <img src="./images/grapeleaf.png" alt="" />
              </div>
              <div class="grapeBody" style="z-index: 5">
                <div class="grapeBodyBox">
                  <div class="row" v-for="(item,index) in showRowList">
                    <div
                      class="col"
                      v-for="(it,i) in item.colList"
                      :style="{background:it.isBelate==true?'#fff':''}"
                    >
                      {{it.day}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="leftBottonIn">
            <div class="leftBLine" v-for="item in lineList">
              <div
                class="leftPointIcon"
                :style="{background:item.color=='紫色'?'#E2D6FF':item.color=='白色'?'#E4E4E4':'#CEFFCE'}"
              >
                <div
                  class="leftPointInner"
                  :style="{background:item.color=='紫色'?'#CD82FF':item.color=='白色'?'#fff':'#3BF73B'}"
                ></div>
              </div>
              <div
                class="leftBLineText"
                :class="item.color=='白色'? 'whitePointStyle':item.color=='绿色'?'greenPointStyle':''"
              >
                {{item.text}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rightContent">
        <div class="peopleBox">
          <div class="peopleCard" v-for="(item,index) in peopleList">
            <div class="peopleTop">
              <div class="peopleTLeft">
                <div class="peopleRow">
                  <div class="rowLeft">部门</div>
                  <div class="rowRight">{{item.deptName}}</div>
                </div>
                <div class="peopleRow">
                  <div class="rowLeft">姓名</div>
                  <div class="rowRight">{{item.name}}</div>
                </div>
                <div class="peopleRow">
                  <div class="rowLeft">月份</div>
                  <div class="rowRight">{{item.month}}</div>
                </div>
              </div>
              <div class="peopleTRight">
                <img :src="item.userImg" alt="" />
                <!-- <img src="./images/6.jpg" alt="" /> -->
              </div>
            </div>
            <div class="peopleBottom">
              <!-- 葡萄图 -->
              <div class="propleGrapeBox">
                <div class="grapeBox">
                  <div class="grapeHead">
                    <img src="./images/grapeleaf.png" alt="" />
                  </div>
                  <div class="grapeBody" style="z-index: 5">
                    <div class="grapeBodyBox">
                      <div class="row" v-for="(item,index) in item.attendList">
                        <div
                          class="col"
                          v-for="(it,i) in item.colList"
                          :style="{background: it.isBelate==true && it.isLastDay==false ?'#fff': it.isBelate==true && it.isLastDay==true ? '#A7FFA7':''}"
                        >
                          {{it.day}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="listEmpty" v-if="peopleList.length==0">暂无数据...</div>
        </div>
      </div>
    </div>
  </div>
  <body>
    <script src="js/axios.js"></script>
    <script src="./js/public.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: function () {
          return {
            nowDay: new Date().getDate(),
            serverPath: "",
            leftList: [
              {
                title: "推行葡萄图的目的",
                content:
                  "为提升大厅政务服务水平，优化我区营商环境和政务服务效能，提升办事群众和企业的满意度和获得感，真实反映出每位员工的工作状况，制定葡萄图绩效考核针对大厅人员日常考勤进行统计分析，掌握人员考勤工作情况，合理分配人员岗位。",
              },
              {
                title: "葡萄图适用的范围",
                content: "高新区政务服务大厅窗口工作人员",
              },
              {
                title: "葡萄图考核方法",
                content:
                  "每位窗口人员每个月都有一张葡萄图，每位窗口人员每个出勤日都拥有一颗葡萄。上级领导根据员工的实际表现给予涂色，如有不良表现或优异变现均记录在《关键事件记录卡》上，以作为后续评定绩效等级的依据。每个葡萄有6种颜色，所有窗口人员的葡萄图均在现场公开、公布。",
              },
            ],
            showRowList: [
              {
                colList: [
                  { day: 31, isBelate: false },
                  { day: 30, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 29, isBelate: false },
                  { day: 28, isBelate: true },
                  { day: 27, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 26, isBelate: false },
                  { day: 25, isBelate: false },
                  { day: 24, isBelate: false },
                  { day: 23, isBelate: false },
                  { day: 22, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 21, isBelate: false },
                  { day: 20, isBelate: false },
                  { day: 19, isBelate: false },
                  { day: 18, isBelate: true },
                  { day: 17, isBelate: false },
                  { day: 16, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 15, isBelate: false },
                  { day: 14, isBelate: false },
                  { day: 13, isBelate: false },
                  { day: 12, isBelate: false },
                  { day: 11, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 10, isBelate: false },
                  { day: 9, isBelate: false },
                  { day: 8, isBelate: true },
                  { day: 7, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 6, isBelate: false },
                  { day: 5, isBelate: false },
                  { day: 4, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 3, isBelate: false },
                  { day: 2, isBelate: false },
                ],
              },
              { colList: [{ day: 1, isBelate: false }] },
            ],
            lineList: [
              {
                color: "绿色",
                text: "未来",
              },
              {
                color: "紫色",
                text: "紫色：A ≥ 80",
              },
              {
                color: "白色",
                text: "白色:轮休、换班、请假",
              },
            ],
            peopleList: [],
            mockGrape: [],
          };
        },
        created: function () {
          this.serverPath = server_path;
        },
        methods: {
          getDate() {
            let now = new Date();
            let nowYear = now.getFullYear();
            let nowMonth = now.getMonth() + 1;
            // 大小月判断
            if (
              (nowMonth == 1 ||
                nowMonth == 3 ||
                nowMonth == 5 ||
                nowMonth == 7 ||
                nowMonth == 8 ||
                nowMonth == 10 ||
                nowMonth == 12) &&
              nowMonth != 2
            ) {
              this.mockGrape = [
                {
                  colList: [
                    { day: 31, isBelate: "", isLastDay: "" },
                    { day: 30, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 29, isBelate: "", isLastDay: "" },
                    { day: 28, isBelate: "", isLastDay: "" },
                    { day: 27, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 26, isBelate: "", isLastDay: "" },
                    { day: 25, isBelate: "", isLastDay: "" },
                    { day: 24, isBelate: "", isLastDay: "" },
                    { day: 23, isBelate: "", isLastDay: "" },
                    { day: 22, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: "", isLastDay: "" },
                    { day: 20, isBelate: "", isLastDay: "" },
                    { day: 19, isBelate: "", isLastDay: "" },
                    { day: 18, isBelate: "", isLastDay: "" },
                    { day: 17, isBelate: "", isLastDay: "" },
                    { day: 16, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: "", isLastDay: "" },
                    { day: 14, isBelate: "", isLastDay: "" },
                    { day: 13, isBelate: "", isLastDay: "" },
                    { day: 12, isBelate: "", isLastDay: "" },
                    { day: 11, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: "", isLastDay: "" },
                    { day: 9, isBelate: "", isLastDay: "" },
                    { day: 8, isBelate: "", isLastDay: "" },
                    { day: 7, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: "", isLastDay: "" },
                    { day: 5, isBelate: "", isLastDay: "" },
                    { day: 4, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: "", isLastDay: "" },
                    { day: 2, isBelate: "", isLastDay: "" },
                  ],
                },
                { colList: [{ day: 1, isBelate: "", isLastDay: "" }] },
              ];
            } else if (
              nowMonth != 2 &&
              (nowMonth == 4 ||
                nowMonth == 6 ||
                nowMonth == 9 ||
                nowMonth == 11)
            ) {
              this.mockGrape = [
                {
                  colList: [
                    { day: 30, isBelate: "", isLastDay: "" },
                    { day: 29, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 28, isBelate: "", isLastDay: "" },
                    { day: 27, isBelate: "", isLastDay: "" },
                    { day: 26, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 25, isBelate: "", isLastDay: "" },
                    { day: 24, isBelate: "", isLastDay: "" },
                    { day: 23, isBelate: "", isLastDay: "" },
                    { day: 22, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: "", isLastDay: "" },
                    { day: 20, isBelate: "", isLastDay: "" },
                    { day: 19, isBelate: "", isLastDay: "" },
                    { day: 18, isBelate: "", isLastDay: "" },
                    { day: 17, isBelate: "", isLastDay: "" },
                    { day: 16, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: "", isLastDay: "" },
                    { day: 14, isBelate: "", isLastDay: "" },
                    { day: 13, isBelate: "", isLastDay: "" },
                    { day: 12, isBelate: "", isLastDay: "" },
                    { day: 11, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: "", isLastDay: "" },
                    { day: 9, isBelate: "", isLastDay: "" },
                    { day: 8, isBelate: "", isLastDay: "" },
                    { day: 7, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: "", isLastDay: "" },
                    { day: 5, isBelate: "", isLastDay: "" },
                    { day: 4, isBelate: "", isLastDay: "" },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: "", isLastDay: "" },
                    { day: 2, isBelate: "", isLastDay: "" },
                  ],
                },
                { colList: [{ day: 1, isBelate: "", isLastDay: "" }] },
              ];
            }
            // 2月润平年判断
            if (
              (nowYear % 4 == 0 && nowYear % 100 != 0) ||
              nowYear % 400 == 0
            ) {
              // 这里是闰年的2月，有29天
              if (nowMonth == 2) {
                this.mockGrape = [
                  {
                    colList: [
                      { day: 29, isBelate: "", isLastDay: "" },
                      { day: 28, isBelate: "", isLastDay: "" },
                      { day: 27, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "", isLastDay: "" },
                      { day: 25, isBelate: "", isLastDay: "" },
                      { day: 24, isBelate: "", isLastDay: "" },
                      { day: 23, isBelate: "", isLastDay: "" },
                      { day: 22, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "", isLastDay: "" },
                      { day: 20, isBelate: "", isLastDay: "" },
                      { day: 19, isBelate: "", isLastDay: "" },
                      { day: 18, isBelate: "", isLastDay: "" },
                      { day: 17, isBelate: "", isLastDay: "" },
                      { day: 16, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "", isLastDay: "" },
                      { day: 14, isBelate: "", isLastDay: "" },
                      { day: 13, isBelate: "", isLastDay: "" },
                      { day: 12, isBelate: "", isLastDay: "" },
                      { day: 11, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "", isLastDay: "" },
                      { day: 9, isBelate: "", isLastDay: "" },
                      { day: 8, isBelate: "", isLastDay: "" },
                      { day: 7, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "", isLastDay: "" },
                      { day: 5, isBelate: "", isLastDay: "" },
                      { day: 4, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "", isLastDay: "" },
                      { day: 2, isBelate: "", isLastDay: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "", isLastDay: "" }] },
                ];
              }
            } else {
              // 这里是平年的2月，只有28天
              if (nowMonth == 2) {
                this.mockGrape = [
                  {
                    colList: [
                      { day: 28, isBelate: "", isLastDay: "" },
                      { day: 27, isBelate: "", isLastDay: "" },
                      { day: 26, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 25, isBelate: "", isLastDay: "" },
                      { day: 24, isBelate: "", isLastDay: "" },
                      { day: 23, isBelate: "", isLastDay: "" },
                      { day: 22, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "", isLastDay: "" },
                      { day: 20, isBelate: "", isLastDay: "" },
                      { day: 19, isBelate: "", isLastDay: "" },
                      { day: 18, isBelate: "", isLastDay: "" },
                      { day: 17, isBelate: "", isLastDay: "" },
                      { day: 16, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "", isLastDay: "" },
                      { day: 14, isBelate: "", isLastDay: "" },
                      { day: 13, isBelate: "", isLastDay: "" },
                      { day: 12, isBelate: "", isLastDay: "" },
                      { day: 11, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "", isLastDay: "" },
                      { day: 9, isBelate: "", isLastDay: "" },
                      { day: 8, isBelate: "", isLastDay: "" },
                      { day: 7, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "", isLastDay: "" },
                      { day: 5, isBelate: "", isLastDay: "" },
                      { day: 4, isBelate: "", isLastDay: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "", isLastDay: "" },
                      { day: 2, isBelate: "", isLastDay: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "", isLastDay: "" }] },
                ];
              }
            }
          },
          getPeopleData() {
            var this_ = this;
            axios
              .get(this.serverPath + "/sys/attend/list", {})
              .then(function (res) {
                if (res.data.code == 0) {
                  let dataa = res.data.userList;
                  //   数据拼装
                  //   单独拼凑数组o防止数据层太深
                  //   最后拼凑进渲染数据
                  let o = dataa.map((it) => {
                    return {
                      name: it.name,
                      attendList: it.attendList,
                    };
                  });
                  let j;
                  o.map((item, index) => {
                    // 每次循环都将mockGrape初始化
                    this_.getDate();
                    j = this_.mockGrape;
                    j.forEach((it) => {
                      it.colList.map((i) => {
                        let a = item.attendList.find(
                          (itt) => this_.changeDate(itt.attendDate).day == i.day
                        );
                        if (a == undefined) {
                          i.isBelate = true;
                        } else {
                          i.isBelate = false;
                        }
                        i.isLastDay = i.day > this_.nowDay ? true : false;
                      });
                      return it;
                    });
                    o[index].attendList = j;
                  });
                  //   数据拼装
                  dataa.map((it) => {
                    it.attendList = o.find((i) => i.name == it.name).attendList;
                  });
                  this_.peopleList = dataa;
                  console.log(this_.peopleList);
                }
              });
          },
          //   处理日期
          changeDate(e) {
            let list = e.split("-");
            let year = list[0];
            let month = list[1];
            let day = list[2];
            return {
              year: Number(year),
              month: Number(month),
              day: Number(day),
            };
          },
          //   获取当天日期
          getNowDay() {
            console.log(this.nowDay);
          },
        },
        mounted: function () {
          this.getDate();
          this.getPeopleData();
          this.getNowDay();
        },
      });
    </script>
    <script src="js/polyfill.min.js"></script>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/lib.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/index.js"></script>
    <script src="js/js.cookie.js"></script>
    <script src="js/sm2.js"></script>
    <script src="js/Util.js"></script>
  </body>
</html>
